<template>
	<div class="Profit">
		<div class="total bottom-ash-line">
			<div class="all">
				<div>{{(parseFloat(userInfo.price) + parseFloat(userInfo.dprice)).toFixed(2)}}</div>
				<div class="text">￥总订单业绩</div>
			</div>
			<div class="bottom-type">
				<div class="end achievement">
					<div class="img-title">
						<img src="../../../static/images/shouru.png" alt="">
						<span>已结算业绩</span>
					</div>
					<div>￥{{userInfo.price}}</div>
				</div>
				<div class="start achievement">
					<div class="img-title">
						<img src="../../../static/images/card-mini.png" alt="">
						<span>未结算业绩</span>
					</div>
					<div>￥{{userInfo.dprice}}</div>
				</div>
			</div>
		</div>
		<div class="profit-details nav-menu-button bottom-ash-line">
			<title-normal title="收益明细" tip="查看全部" class="header" />
			<div class="date">
				<div class="text">日期筛选</div>
				<div class="search">
					<div class="startTime" @click="onClickStartDate">
						{{ startDate1 }}
					</div>
					<div class="line">&nbsp;——&nbsp;</div>
					<div class="endTime" @click="onClickEndDate">
						{{endDate1}}
					</div>
					<div class="searchButtom" @click="eventClickSeart">筛选</div>
				</div>
			</div>
		</div>
		<!--订单明细循环大包围-->
		<div class="wallet_detail">
			<!--循环体-->
			<div class="month-all-profit">订单业绩：￥{{ sumAmount }}</div>
			<!--循环体-->
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getOrderLog">
				<div class="wallet_detail_cycle" v-for="item in profit">
					<!--左边栏-->
					<div class="wallet_detail_cycle_left">
						<span>{{item.time}}</span>
					</div>
					<!--中间栏-->
					<div class="wallet_detail_cycle_middle">
						<span>{{item.status==1?'订单收入':'钱包提现'}}</span>
						<span v-if="item.status == 1" style="font-size: 1.3rem;font-weight: 500;color: #999999">订单编号:{{item.ordernumber}}</span>
						<span v-if="item.status==2 && item.orderStatus==1" style="font-size: 1.3rem;font-weight: 500;color: #FF0000">提现申请 审核中</span>
						<span v-if="item.status==2 && item.orderStatus==0" style="font-size: 1.3rem;font-weight: 500;color: #FF0000">提现申请 已拒绝</span>
						<span v-if="item.status==2 && item.orderStatus==2" style="font-size: 1.3rem;font-weight: 500;color: #999999">提现申请 已通过</span>
					</div>
					<!--右边栏-->
					<div class="wallet_detail_cycle_right">
						<span v-if="item.status == 1" style="color:#00CC00;font-weight: 500;font-size: 1.9rem ">+ {{item.price}}</span>
						<span v-if="item.status == 2" style="font-size: 1.9rem;font-weight: 500;color:#FF0000 ">- {{item.price}}</span>
					</div>
				</div>
			</van-list>

		</div>
		<van-popup v-model="showStart" position="bottom">
			<van-datetime-picker v-model="startDate2" type="date" @cancel="showStart=false" @confirm="selectStartTime" />
		</van-popup>
		<van-popup v-model="showEnd" position="bottom">
			<van-datetime-picker v-model="startDate2" type="date" @cancel="showEnd=false" @confirm="selectEndTime" />
		</van-popup>
	</div>
</template>

<script>
	import TitleNormal from '../../components/currency/title/normal.vue';
	import { DatetimePicker, Popup, List } from 'vant';

	export default {
		name: "profit",
		components: {
			TitleNormal,
			[DatetimePicker.name]: DatetimePicker, [Popup.name]: Popup, [List.name]: List
		},
		data() {
			return {
				all: 854.5,
				endM: 500.0,
				startM: 354.6,
				showStart: false,
				showEnd: false,
				startDate1: '',
				endDate1: '',
				startDate2: '',
				userInfo: {},
				page: 0,
				list_rows: 10,
				profit: [],
				loading: false,
				finished: false,
				time: {
					start: '', end: ''
                },
                sumAmount: 0
			}
		},
		mounted() {
			this.startDate1 = this.$moment().subtract(2, 'month').format("YYYY-MM-DD");
			this.time.start = this.$moment().subtract(2, 'month').unix();
			this.endDate1 = this.$moment().format('YYYY-MM-DD');
			this.time.end = this.$moment().unix();
			this.getPrice();
		},
		methods: {
			getPrice() {
				var url = '/api/home/user/getone';
				this.$util.postRequestInterface(url, { token: this.$store.state.options.user.token }, (res) => {
					this.userInfo = res.data;
				})
			},
			getOrderLog() {
				var that = this;
				var url = '/api/home/order/getLog';
				var param = {
					page: this.page,
					list_rows: this.list_rows,
					token: this.$store.state.options.user.token,
					starttime: this.time.start,
					endtime: this.time.end
				};
				this.$util.postRequestInterface(url, param, (res) => {
					if (res.data.data.length == 0) {
						that.loading = false;
						that.finished = true;
					} else {
						that.page = that.page + 1;
						for (let i of res.data.data) {
							that.profit.push({
								status: i.status,
								orderStatus: i.orderstatus,
								price: i.price,
								time: that.$moment(i.addtime * 1000).format('YYYY-MM-DD HH:mm:ss'),
								ordernumber: i.ordernum
							});
						}
						// // 数据全部加载完成
						if (that.profit.length >= res.data.count) {
							that.finished = true;
                        }
                        this.sumAmount = res.data.sum;

						// // 加载状态结束
						that.loading = false;
					}
				})
			},
			onClickStartDate() {
				this.showStart = true;
				this.startDate2 = this.$moment(this.startDate1)._d;
			},
			selectStartTime(res) {
				this.startDate1 = this.$moment(res).format("YYYY-MM-DD");
				this.time.start = this.$moment(res).unix();
				this.showStart = false;
			},
			selectEndTime(res) {
				this.endDate1 = this.$moment(res).format("YYYY-MM-DD");
				this.time.end = this.$moment(res).unix();
				this.showEnd = false;
			},
			onClickEndDate() {
				this.showEnd = true;
				this.startDate2 = this.$moment(this.endDate1)._d;
			},
			eventClickSeart() {
                this.profit = [];

				this.page = 0;
				this.loading = false;
                this.finished = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Profit {
		.total {
			background-image: url("../../../static/images/back-ripple.png");
			background-size: 100% 111%;
			padding: 2rem 2rem 4rem;
			color: #ffffff;
			display: flex;
			flex-wrap: wrap;
			.all {
				width: 100%;
				text-align: center;
				div:first-child {
					font-size: 5.5rem;
				}
				.text {
					font-size: 2rem;
				}
			}
			.bottom-type {
				width: 100%;
				padding-top: 2.4rem;
				display: flex;
				justify-content: space-between;
				padding-bottom: 4rem;
				.achievement {
					flex: 1;
					text-align: center;
					.img-title {
						padding-bottom: 0.8rem;
						img {
							width: 1.5rem;
							height: 1.5rem;
							vertical-align: bottom;
						}
					}
				}
				.achievement:first-child {
					border-right: 0.01rem solid #dddddd;
				}
			}
		}

		.profit-details {
			padding: 1rem;
			.header {
				padding-bottom: 1rem;
				border-bottom: 0.01rem solid #dddddd;
			}
			.date {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 1rem 0;
				color: #999999;
				font-size: 1.3rem;
				.search {
					display: flex;
					align-items: center;
					margin-left: 1rem;
					border: 0.02rem solid #dddddd;
					border-radius: 1rem;
					.startTime {
						margin-left: 0.2rem;
					}
					.searchButtom {
						margin-left: 0.2rem;
						/*padding: .6rem;*/
						padding: 0.4rem 0.6rem;
						color: #ffffff;
						background: #00cc00;
						border: 0.02rem solid #00cc00;
						border-radius: 1rem;
						border-top-left-radius: 0rem;
						border-bottom-left-radius: 0rem;
						/*border-radius-bottomright: 1rem;*/
						/*border-radius-topright: 1rem;*/
					}
				}
			}
		}
		/*收支明细循环体大包围*/
		.wallet_detail {
			width: 100%;
			.month-all-profit {
				background: #f4f4f4;
				color: #999999;
				text-align: center;
				width: 100%;
				padding: 0.6rem 0;
			}
			/*循环体*/
			.wallet_detail_cycle {
				width: 95%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eeeeee;
				margin-top: 1rem;
				padding-bottom: 1rem;
				/*循环体左部*/
				.wallet_detail_cycle_left {
					width: 25%;
					text-align: right;

					span {
						font-weight: 500;
						font-size: 1.3rem;
						color: #999999;
					}
				}

				/*循环中部*/
				.wallet_detail_cycle_middle {
					width: 50%;
					display: flex;
					flex-direction: column;
					padding-left: 1rem;

					span {
						line-height: 2rem;

						&:nth-child(1) {
							font-size: 1.7rem;
							color: #333333;
							font-weight: 500;
						}
					}
				}

				/*循环右部*/
				.wallet_detail_cycle_right {
					width: 25%;
					text-align: right;
				}
			}
		}
	}
</style>
